<template>
  <div class="container">
    <official-account></official-account>
    <p style="height:20rpx"></p>
    
    <div class="container">
    <div class="userinfo" >
      <img v-if='userinfo.avatarUrl' :src="userinfo.avatarUrl" alt="">
      <p>{{userinfo.nickName}}</p>
    </div>

   </div>

    <!-- <YearProgress></YearProgress> -->

    <!-- <button v-if='userinfo.openId' @click='scanBook' class='btn'>添加图书</button> -->
    <!-- <button v-else open-type="getUserInfo" lang="zh_CN" class='btn' @getuserinfo="login">点击登录</button> -->
    <!-- <button open-type="getUserInfo" lang="zh_CN" class='btn' @getuserinfo="login2">点击登录</button> -->
    <!-- <button @click='jumpClick' class='btn'>你还想听什么?</button> -->

    <!-- <button v-if='userinfo.nickName' @click='jumpClick' class='btn'>你还想听什么?</button> -->
    <!-- <button v-if='!userinfo.nickName' open-type="getUserInfo" lang="zh_CN" class='btn' @getuserinfo="login">点击登录</button> -->
    <div class="b">
      <!-- <p v-if='userinfo.nickName'>微信搜索公众号</p> -->
      <p>点击[查看]或微信搜索公众号</p>
      <!-- <img v-if='userinfo.nickName' class="img1" src="/static/images/me/follow.png" mode="widthFix" alt=""> -->
      <p><span style="color:#e43831;">**无声或有声**</span></p>   
      <p v-if='userinfo.nickName'>持续更新功能,关注我们,不会迷路</p>
      <p v-else>关注我们,不会迷路</p>
      <br><br>
      <img class="img2" src="/static/images/me/comingsoon.png" mode="widthFix" alt="">
      <br><br>
      <!-- <p style="color: #777">更多功能, 我们正在挑灯夜战努力建设中.....</p>
      <br>
      <p style="color: #333">敬请期待!</p> -->
    </div>

    <!-- <button v-if='userinfo.openId'></button>
    <button v-else open-type="getUserInfo" lang="zh_CN" class='btn' @getuserinfo="login">点击登录</button> -->

    <p style="height:400rpx"></p>
  </div>
</template>
<script>
import qcloud from 'wafer2-client-sdk'
import YearProgress from '@/components/YearProgress'
import {showSuccess, showModal} from '@/util'
import {get2, post2} from '@/server/api'
import config from '@/config'
export default {
  components: {
    YearProgress
  },
  data () {
    return {
      userinfo: {
        avatarUrl: '../../static/images/me/head.png',
        nickName: ''
      }
    }
  },
  mounted () {
    this.userinfo = wx.getStorageSync('userinfo')
    // this.bookid = this.$root.$mp.query.id

    // this.demo().then(result => {
    // console.log('demo', result.data);
    // });
    
    // this.joke().then(result => {
    // console.log('joke', result.data.data.msg);
    // });

  },
  methods: {
    async demo() {
    // return await get2('demo', {})
    },
    async joke() {
    return await get2('api/jokes', {})
    },
    jumpClick (comment) {
      wx.navigateTo({
        // url: '/pages/web-view/main'
        url: '/pages/web-view/main?path=' + 'https://wj.qq.com/s/2491547/f457/'
        // url: '/pages/detail/main'
      })
    },
    loginSuccess (res) {
      showSuccess('登录成功')
      wx.setStorageSync('userinfo', res)
      this.userinfo = res
    },
    login () {
      wx.showToast({
        title: '登录中',
        icon: 'loading'
      })
      qcloud.setLoginUrl(config.loginUrl)
      const session = qcloud.Session.get()
      console.log('session', session)
      if (session) {
        // qcloud.loginWithCode({
        //   success: res => {
        //     console.log('没过期的登录', res)
            this.loginSuccess(session.userinfo)
        //   },
        //   fail: err => {
        //     console.error(err)
        //   }
        // })
      } else {
        qcloud.login({
          success: res => {
            console.log('登录成功', res)
            this.loginSuccess(res)
          },
          fail: err => {
            console.error(err)
          }
        })
      }
    }

  },
  onShow () {
    // console.log(123)
    // let userinfo = wx.getStorageSync('userinfo')
    // console.log([userinfo])
    // if (userinfo) {
    //   this.userinfo = userinfo
    // }
    // console.log(this.userinfo)
  }
}
</script>

<style lang='scss'>
.container{
  // margin:0 30rpx;
  height: 100%;
  background-color: #333;
  color: white;
}  
.userinfo{
  // padding-top:100rpx;
  text-align:center;
  // margin-bottom: 100rpx;
  font-size: 20rpx;
  img{
    width: 150rpx;
    height:150rpx;
    margin: 10rpx;
    border-radius: 50%;
  }
}
.btn {
 background-color:#EAA200;
 width: 650rpx;
//  hover: black;
}
.button {
  hover-class: none;
}
.b {
  text-align: center;
  margin: 50rpx;
  padding: 50rpx;
  background-color: white;
  // width: 750rpx;
  border-radius: 5px;
  .img1 {
    // height: 200rpx;
    width: 400rpx;
    margin: 50rpx;
  }
  .img2{
    width: 550rpx;
    margin: 50rpx 0;
  }
  p {
    /*height: 1rem;*/
    // text-align: center;
    font-size: 12px;
    color: #EAA200;
    // color: #17bbef;
    margin: 20rpx 0;
  }
}
</style>
